<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "@/router";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { getDictList } from "@/api/dict";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { warehouseList } = storeToRefs(systemStore);

const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();
const form = ref({
  inboundType: "", // 入库类型
  relateOrderCode: "", // 单据编号
  warehouseCode: "", // 入库仓库名称
  inboundCode: "", // 入库单编号
  memo: "" // 备注
});

const inboundTypeList = ref([]);

const rules = ref({
  inboundType: [
    { required: true, message: "请选择入库类型", trigger: "change" }
  ],
  warehouseCode: [
    { required: true, message: "请输入关联单据编号", trigger: "blur" }
  ]
});

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

const resetForm = () => {
  form.value = {
    inboundType: "", // 入库类型
    relateOrderCode: "", // 单据编号
    warehouseCode: "", // 入库仓库名称
    inboundCode: "", // 入库单编号
    memo: "" // 备注
  };
};

/**
 * 设置表单
 * @param opt 表单对象
 */
const setForm = (opt: any) => {
  form.value = Object.assign({}, form.value, opt);
};

const getInboundTypeList = () => {
  getDictList({ dictCode: "INBOUND_TYPE_M" }).then((res: any) => {
    inboundTypeList.value = res.data || [];
  });
};

onMounted(() => {
  getInboundTypeList();
});

defineExpose({
  getForm: () => form.value,
  setForm
});
</script>

<template>
  <div class="applyForm">
    <div class="flex items-center justify-between flex-row pb-[16px]">
      <p class="text-[16px] font-bold">入库管理信息</p>
      <el-button @click="goBack"
        ><svg-icon name="rollback" size="16" /> 返回</el-button
      >
    </div>
    <el-form class="pr-[30px] mb-[-16px]" :model="form" inline :rules="rules">
      <div>
        <el-form-item label="入库类型" prop="inboundType">
          <el-select
            v-model="form.inboundType"
            disabled
            filterable
            placeholder="请输入"
            clearable
          >
            <el-option
              v-for="item in inboundTypeList"
              :key="item.dictLabelValue"
              :label="item.dictLabelName"
              :value="item.dictLabelValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库关联单据编号" prop="relateOrderCode">
          <el-input
            v-model="form.relateOrderCode"
            disabled
            class="mr-[8px]"
            placeholder="请输入内容"
          />
        </el-form-item>
      </div>
      <el-form-item label="入库仓库名称" prop="warehouseCode">
        <el-select
          v-model="form.warehouseCode"
          disabled
          filterable
          placeholder="请输入"
          clearable
        >
          <el-option
            v-for="(item, index) in warehouseList"
            :key="index"
            :value="item.warehouseCode"
            :label="item.warehouseName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入库单编号" prop="inboundCode">
        <el-input
          v-model="form.inboundCode"
          disabled
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
          v-model="form.memo"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
.applyForm {
  overflow: hidden;
  .el-textarea {
    --el-textarea-height: 32px;
  }
}
</style>
